let player;
const button = document.getElementById("button");
const prev = document.getElementById("previous");
const next = document.getElementById("next");
const process = document.getElementById("process");
let inited = false;
let id = 0;
let interval = null;

//定义文件位置
const musicUrl = "//bms.wngamebox.cn/music/";
const picUrl = "//bms.wngamebox.cn/pic/";
//定义景点名称数组
const config = [
  "Test",
  "景点概况",
  "戏楼",
  "大门",
  "仪门",
  "甬道",
  "钟鼓楼、焚箔炉",
  "龙首、凤尾柏",
  "拜殿",
  "大殿",
  "财神殿全景",
  "娘娘殿",
  "旋生柏、结义柏",
  "春秋殿",
  "关林",
  "奉敕碑亭",
  "石墓门",
];

//对于新ID更新图片和音频
function init() {
  //读取协议
  let protocol = window.location.protocol;
  if (protocol == "file:") protocol = "http:";
  //获取对应的景点名称
  let name = config[id];
  //写DOM
  document.getElementById("locationName").innerText = name;
  //拼接文件URL
  let music = protocol + musicUrl + id + ".mp3";
  let pic = protocol + picUrl + id + ".jpg";
  //更新CSS
  document.getElementsByClassName(
    "background"
  )[0].style.background = `url(${pic}) rgba(0, 0, 0, 0.5) no-repeat center center`;
  //更新封面
  document.getElementById("cover").src = pic;

  //更换播放源
  if (player) {
    player.src = music;
    player.load();
  }

  //处理上一曲和下一曲按钮显示
  if (id == 1) {
    prev.style.display = "none";
  } else {
    prev.style.display = "inline";
  }
  if (id == config.length - 1) {
    next.style.display = "none";
  } else {
    next.style.display = "inline";
  }
}

//处理按钮点击事件
function onClick() {
  //判断是否正在加载中
  if (isLoading()) return;
  //处理播放与暂停
  if (player.paused) {
    changeButton("pause");
    player.play();
  } else {
    changeButton("play");
    player.pause();
  }
}

//改变按钮样式
function changeButton(status) {
  button.src = `static/${status}.png`;
}

//判断按钮是否处于载入中状态
function isLoading() {
  return button.src.indexOf("loading") != -1;
}

//纯js实现的上一曲下一曲切换，传入新ID
function updateID(val) {
  //更新ID
  if (val < 1 || val > config.length - 1) {
    console.log("Error update call:" + val);
    return;
  }
  id = val;
  //更新地址栏URL
  window.history.replaceState({}, "", `?id=${id}`);

  init();
  changeButton("loading");
}

//处理播放器就绪事件
let selfLock = 0;
function onCanPlay() {
  if (selfLock == id) {
    return;
  } else {
    selfLock = id;
  }
  //如果是上一曲下一曲切换则直接开始播放
  if (inited) {
    changeButton("pause");
    player.play();
    return;
  }
  //初始化操作，按钮就绪
  changeButton("play");
  inited = true;
}

//格式化时间
function formatTime(second){
  let min=parseInt(second/60)
  let sec=parseInt(second%60)
  if(sec<10) sec="0"+sec.toFixed(0)
  else sec=sec.toFixed(0)
  return `${min}:${sec}`
}

//页面初始化
function onLoaded() {
  //读取URL参数获取id
  id = Number(location.search.split("=")[1]);
  if (!id || id + 1 > config.length) {
    console.log("Error ID");
    return;
  } else {
    //读取协议
    let protocol = window.location.protocol;
    if (protocol == "file:") protocol = "http:";
    //拼接文件URL
    let music = protocol + musicUrl + id + ".mp3";
    //创建audio对象并要求加载
    player = new Audio(music);
    player.load();
    init();
  }

  //监听player事件
  player.addEventListener("canplaythrough", onCanPlay);
  document.addEventListener("WeixinJSBridgeReady", (_) => {
    if (!inited) {
      player.load();
    }
  });
  player.addEventListener("ended", (_) => {
    changeButton("play");
  });

  //监听按钮点击
  button.addEventListener("click", onClick);
  prev.addEventListener("click", (_) => {
    updateID(id - 1);
  });
  next.addEventListener("click", (_) => {
    updateID(id + 1);
  });

  //设置定时器
  interval=setInterval(()=>{
    let a=player.currentTime
    let b=player.duration
    if(b) process.innerText=`${formatTime(a)} / ${formatTime(b)}`
    else process.innerText="0:00 / 0:00"
  },1000)
}

window.onload = onLoaded;
window.onunload=()=>{
  if(interval) clearInterval(interval)
}